<template>
  <a-modal
      v-model:visible="bindVisible"
      :title="$t('runningTaskInfoModal.taskInfo')"
      :cancelText="$t('operation.cancel')"
      :okText="$t('operation.confirm')"
      @ok="confirm"
  >
    <p>{{$t('runningTaskInfoModal.name')}} : {{form.taskInfo.name}}</p>
    <p>{{$t('runningTaskInfoModal.support')}} : <p1 v-for="item in form.taskInfo.support"><br>{{item}}</p1></p>
    <p>{{$t('runningTaskInfoModal.cron')}} : {{form.taskInfo.cron}}</p>
    <p>{{$t('runningTaskInfoModal.numberOfExecute')}} : {{form.taskInfo.numberOfExecute}}</p>
    <p>{{$t('runningTaskInfoModal.requestUrl')}} : {{form.taskInfo.requestUrl}}</p>
    <p>{{$t('runningTaskInfoModal.httpMethod')}} : {{form.taskInfo.httpMethod}}</p>
    <p>{{$t('runningTaskInfoModal.headers')}} : <br>{{form.taskInfo.headers}}</p>
    <p>{{$t('runningTaskInfoModal.uriVariables')}} : <br>{{form.taskInfo.uriVariables}}</p>
    <p>{{$t('runningTaskInfoModal.body')}} :<br> {{form.taskInfo.body}}</p>

    <!--    <Descriptions :column=1 >-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.name')"> {{form.taskInfo.name}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.support')"> <br> {{form.taskInfo.support}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.cron')"> <br> {{form.taskInfo.cron}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.numberOfExecute')"> <br> {{form.taskInfo.numberOfExecute}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.requestUrl')"> <br> {{form.taskInfo.requestUrl}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.httpMethod')"> <br> {{form.taskInfo.httpMethod}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.headers')"> <br> {{form.taskInfo.headers}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.uriVariables')"> <br> {{form.taskInfo.uriVariables}}</Descriptions.Item>-->
<!--      <Descriptions.Item :label="$t('runningTaskInfoModal.body')"> <br> {{form.taskInfo.body}}</Descriptions.Item>-->
<!--    </Descriptions>-->

  </a-modal>
</template>

<script lang="ts" setup>
import {PropType} from 'vue'
import {RunningTask} from "@/store/runningTask";

const props = defineProps({
  form: {type: Object as PropType<RunningTask>, default: () => ({})},
  visible: {type: Boolean, default: false},
  projects: {type: Array as PropType<RunningTask[]>, default: () => []},
})
const emit = defineEmits(['update:visible', 'ok'])
const bindVisible = ref(false)
watchEffect(() => (bindVisible.value = props.visible))
watchEffect(() => emit('update:visible', bindVisible.value))

const confirm = async () => {
  bindVisible.value = false
  emit('ok')
}

</script>
